import { defineComponent, h, computed, ref } from "vue";

//推荐使用defineComponent来定义组件!
export default defineComponent({
  name: "ElRow",
  props: {
    tag: {
      type: String,
      default: "div",
    },
    gutter: {
      type: Number,
      default: 0,
    },
    type: String,
    justify: {
      type: String,
      default: "start",
      validator: (val) => ["start", "end", "center", "space-around", "space-between"].includes(val),
    },
    align: {
      type: String,
      default: "top",
      validator: (val) => ["top", "middle", "bottom"].includes(val),
    },
  },
  // props: 这是一个包含组件 props 的对象。
  //context: 这是一个包含三个属性的对象：attrs、slots 和 emit。
  setup(props, { slots }) {
    const style = computed(() => {
      const style = {};
      if (props.gutter) {
        style.paddingLeft = -props.gutter / 2 + "px";
        style.paddingRight = props.gutter / 2 + "px";
      }
      return style;
    });

    return () =>
      h(
        props["tag"],
        {
          class: [
            "el-row",
            { "el-row--flex": props.type === "flex" },
            props.justify !== "start" && `is-justify-${props.justify}`,
            props.align !== "top" && `is-align-${props.align}`,
          ],
          style: style.value,
        },
        slots.default ? slots.default() : []
      );
  },
});
